<template>
  <div id="app">
    <div id="nav">
      <!-- 导入账单 -->
      <router-link to="/check">
        <i class="check"></i>
        账单
      </router-link>
      <!-- 导入报表组件 -->
      <router-link to="/reportforms">
        <i class="reportforms"></i>
        报表
      </router-link>
      <!-- 导入添加组件 -->
      <router-link to="/add">
        <i class="add"></i>
      </router-link>
      <!-- 导入社区组件 -->
      <router-link to="/community">
        <i class="community"></i>
        社区
      </router-link>
      <!-- 导入我的组件 -->
      <router-link to="/me">
        <i class="me"></i>
        我的
      </router-link>
    </div>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
};
</script>

<style lang="less" scoped>
#nav {
  display: none;
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 2rem;
  text-align: center;
  background-color: #000;
  box-shadow: 0 0 0.3rem #0099ff;
  z-index: 9;
  a {
    display: block;
    flex: 1;
    height: 100%;
    font-size: 0.7rem;
    color: #fff;
    i {
      display: block;
      width: 50%;
      height: 50%;
      margin: 0 auto;
    }
    .add {
      margin-top: .1rem;
      width: 80%;
      height: 80%;
      background: url("./assets/imgs/增加.svg") center/cover no-repeat;
      background-size: 50%;
    }
    .reportforms {
      background: url("./assets/imgs/报表.svg") center/cover no-repeat;
      background-size: 50%;
    }
    .check {
      background: url("./assets/imgs/账单.svg") center/cover no-repeat;
      background-size: 50%;
    }
    .community {
      background: url("./assets/imgs/社区.svg") center/cover no-repeat;
      background-size: 50%;
    }
    .me {
      background: url("./assets/imgs/我的.svg") center/cover no-repeat;
      background-size: 50%;
    }
  }
}

</style>
